"use client";
import React, { createRef, useEffect, useRef, useState } from "react";
import LNavigation from "@/ui/navigation/navigation";
import Link from "next/link";
import {
  useRouter,
  usePathname,
  useParams,
  useSearchParams,
} from "next/navigation";
import { useTranslations } from "next-intl";
let timer: any = null;
export default function CustomHeader() {
  const router = useRouter();
  const pageArr = [
    {
      path: "",
      label: "home-page",
    },
    {
      path: "/product",
      label: "product-center-page",
    },
    {
      path: "/information",
      label: "data-down-page",
    },
    {
      path: "/technology",
      label: "technology-page",
    },
    {
      path: "/contact",
      label: "contact-page",
    },
  ];
  const languages = [
    {
      label: "中文",
      value: "zh",
    },
    {
      label: "English",
      value: "en",
    },
    {
      label: "Русский",
      value: "ru",
    },
  ];
  const path = usePathname();
  const params = useParams();

  const search = useSearchParams();
  const HeaderRef = createRef<HTMLElement>();
  const [scrollHeaderBottom, setScrollHeaderBottom] = useState(false);
  const t = useTranslations("header");
  const th = useTranslations("home");

  function ToggleLanguage(item: any) {
    // 第一种情况: 没有进入文章详情
    const basePath = path.replace(/^\/(zh|en|ru)/, "");
    // localStorage.setItem("i18n_local", item.value)
    if (path != basePath && !path.includes("/technology/")) {
      if (path.includes(basePath)) {
        if (timer != null) {
          clearTimeout(timer);
          timer = null;
        }
        timer = setTimeout(() => {
          router.push("/" + item.value + basePath + "?" + search.toString());
        }, 10);
      }
    }
    if (basePath.includes("technology")) {
      const fullPath = `/${item.value}/${basePath.split("/")[1]}`;
      router.push(fullPath);
      return;
    }
  }
  const ToggleLanguageComponents = () => {
    return (
      <ul className="flex gap-2 pr-8">
        <li>
          <LNavigation scroll={scrollHeaderBottom}>
            {languages.map((item) => (
              <div
                onClick={() => ToggleLanguage(item)}
                key={item.value}
                className="outline-0 px-10 py-3 hover:bg-gray-100"
              >
                <span>{item.label}</span>
              </div>
            ))}
          </LNavigation>
        </li>
      </ul>
    );
  };
  useEffect(() => {
    function Handle(event: Event) {
      const pageY =
        window.scrollY ||
        window.pageYOffset ||
        document.body.scrollTop +
          ((document.documentElement && document.documentElement.scrollTop) ||
            0);

      if (pageY > HeaderRef.current!.offsetHeight - 48 && !scrollHeaderBottom)
        setScrollHeaderBottom(true);
      if (pageY < HeaderRef.current!.offsetHeight - 48 && scrollHeaderBottom)
        setScrollHeaderBottom(false);
    }
    document.addEventListener("scroll", Handle);
    return () => {
      document.removeEventListener("scroll", Handle);
    };
  }, [scrollHeaderBottom, HeaderRef]);
  return (
    <header ref={HeaderRef} className="h-52 bg-white">
      <div className="h-10 items-center bg-gray-50 shadow">
        <div className="flex px-8 justify-between items-center position-container">
          <div className="h-10 leading-10">{t("welcome")}</div>
          {/* Navigation */}
          {ToggleLanguageComponents()}
        </div>
      </div>
      <div className="position-container px-8 flex justify-between h-24 items-center my-3">
        <div className="w-3/4">
          <div className="flex items-center gap-1">
            <span
              style={{ color: "rgb(26, 65, 153)" }}
              className="text-[32px] mr-2 font-bold"
            >
              {t("company")}
            </span>
            {/* <img priority className='w-auto h-auto' width={220} height={32} src="https://28399727.s21i.faiusr.com/4/ABUIABAEGAAgl8rmkAYouP6EgQUw1gE4IA.png" alt="logo" /> */}
          </div>
          <h1 className="">{t("info")}</h1>
        </div>
        <div>
          {/* <Image
                    className="float-left mx-2"
                    width={45}
                    height={32}
                    priority
                    src="https://16614059.s61i.faiusr.com/4/AD0Iq4X2BxAEGAAghsD71gUo7fjJhwIwLTgt.png"
                    alt=""
                ></Image> */}
          <div className="float-right">
            <div className="text-gray-500 ml-2 text-sm">{t("connect")}</div>
            <div className="text-xl">+86 {t("tel")}</div>
          </div>
        </div>
      </div>
      <div
        className={`bg-blue-600 shadow-xl top-0 left-0 right-0 z-50 ${
          scrollHeaderBottom && "fixed"
        }`}
      >
        <div className="max-w-7xl mx-auto flex justify-between items-center w-full">
          <ul className="flex text-white">
            {pageArr.map((item, index) => (
              <li
                style={{
                  background:
                    `/${params.locale}${item.path}` == path ? "#13439d" : "",
                    lineHeight: "48px"
                }}
                key={item.path}
                className="w-auto max-w-96 px-10 h-[48px] relative hover:bg-[#13439d] group"
              >
                <Link className="block text-center w-full h-full" href={`/${params.locale}${item.path}`}>
                  {t(item.label)}
                </Link>
                {t(item.label) == t("product-center-page") && (
                  <ul className="bg-white cursor-pointer z-[999] max-w-fit overflow-hidden group-hover:h-32 h-0 transition-all text-nowrap shadow text-black rounded absolute left-0 top-12">
                    <li className=" hover:bg-gray-200">
                      <Link
                      className="p-2 block w-full h-full"
                        href={`/${params.locale}/measurement/${th(
                          "four.product"
                        )}?series=${th("measurement.product-1.title")}`}
                      >
                        {th("measurement.product-1.title")}
                      </Link>
                    </li>
                    <li className=" hover:bg-gray-200">
                      <Link
                      className="p-2 block w-full h-full"
                        href={`/${params.locale}/measurement/${th(
                          "four.product"
                        )}?series=${th("measurement.product-2.title")}`}
                      >
                        {th("measurement.product-2.title")}
                      </Link>
                    </li>
                  </ul>
                )}
              </li>
            ))}
          </ul>
          {scrollHeaderBottom && ToggleLanguageComponents()}
        </div>
      </div>
    </header>
  );
}
